<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父组件向子组件传值</title>
    <script src="./lib/vue-2.6.12.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="点击" @click="myclick">
        <com1 :myprop="msg" ref="mycom1"></com1>
        <com2 ref="mycom2"></com2>
    </div>

    <script>
        let comDef = {
            template: '<h4>第二个子组件</h4>',
            methods: {
                show() {
                    console.log('com2 show function')
                }
            },
        };

        let vm = new Vue({
            el: '#app',
            data: {
                msg: '父组件的数据'
            },
            methods: {
                myclick() {
                    // 直接调用子组件的方法
                    this.$refs.mycom2.show();
                    // 直接访问子组件的属性
                    console.log(this.$refs.mycom1.name);
                }
            },

            components: {
                com1: {
                    template: '<h3>这是子组件，传入数据为：{{ myprop }}</h3>',
                    // 自定义特性，接收外部设置，内部只可读取
                    props: ['myprop'], 
                    // 组件私有数据，可读可写
                    data() {
                        return {
                            id: 101,
                            name: 'zhangsan'
                        }
                    }
                },
                'com2': comDef
            }
        })
    </script>
</body>

</html>